<template>
  <DetailsFormBox :title="dataInfo?.table?.title" :type="data.type" :form="data.form" :btns="[
    {
      title: '重置',
      icon: '',
      type: '',
      click: getForm,
    },
    {
      title: '保存',
      icon: '',
      type: 'primary',
      click: (form: any) => {
        saveBtn(form)
      },
    },
  ]" :loading="data.loading" :json="dataInfo">
    <template #default="{ form }">
      <div class="formMain">
        <ElFormItemBox label="班次编号" :prop="`code`">
          <ElInputBox :data="form.code" disabled placeholder="系统自动生成" />
        </ElFormItemBox>
        <ElFormItemBox label="班次名称" :prop="`name`" isRules>
          <ElInputBox :data="form" dataName="name" />
        </ElFormItemBox>
        <ElFormItemBox label="上班时间" :prop="`inTime`" isRules>
          <el-time-select v-model="form.inTime" start="00:00" end="23:45" step="00:15" placeholder="选择时间"
            format="HH:mm:ss" />
        </ElFormItemBox>
        <ElFormItemBox label="下班时间" :prop="`outTime`" isRules>
          <el-time-select v-model="form.outTime" start="00:00" end="23:45" step="00:15" placeholder="选择时间"
            format="HH:mm:ss" />
        </ElFormItemBox>
        <ElFormItemBox label="班次时长" :prop="`inOutLength`">
          <ElNumberBox :data="inOutLength" disabled unit="分钟" />
        </ElFormItemBox>
        <ElFormItemBox label="排序" :prop="`indexNumber`">
          <ElNumberBox :data="form" dataName="indexNumber" />
        </ElFormItemBox>
        <ElFormItemBox label="备注" :prop="`remarks`">
          <ElInputBox :data="form" dataName="remarks" type="textarea" />
        </ElFormItemBox>
      </div>
    </template>
  </DetailsFormBox>
</template>
<script setup lang="ts">
import { useListComponent } from '../pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
import { useRoute } from 'vue-router';
const route = useRoute();
const data = reactive({
  loading: false,
  loadingMsg: '',
  type: route.query.type,
  form: {
    id: "", // 获取或设置主键。
    code: "", // 获取或设置编码。
    name: "", // 获取或设置班次名称。
    inTime: "", // 班次开始时间（使用时间间隔格式）
    outTime: "", // 班次结束时间（使用时间间隔格式）
    inOutLength: 0, // 获取或设置工作时长。
    indexNumber: 0, // 获取或设置排序序号。
    remarks: "" // 获取或设置备注。
  },
});

import { sendMsg } from '@/utils/crossTagMag.ts';
const inOutLength = computed(() => {
  let _form = data.form
  _form.inOutLength = getMinutesDifference(_form.outTime, _form.inTime)
  return _form.inOutLength || 0
})
const getMinutesDifference = (startTime: any, endTime: any) => {
  if (startTime && endTime) {
    const [startHours, startMinutes, startSeconds] = startTime.split(':').map(Number);
    const [endHours, endMinutes, endSeconds] = endTime.split(':').map(Number);

    // 创建两个Date对象，使用相同的日期以便于比较。
    // 注意：这里通过设置一个具体的日期来避免跨天的问题
    const startDate = new Date(2025, 4 - 1, 27, startHours, startMinutes, startSeconds); // 注意月份是从0开始计数
    let endDate = new Date(2025, 4 - 1, 27, endHours, endMinutes, endSeconds);

    // 创建两个Date对象
    const date1 = new Date(`2025-4-15 ${startTime}`);
    const date2 = new Date(endDate < startDate ? `2025-4-15 ${endTime}` : `2025-4-16 ${endTime}`);

    // 计算两个时间的差值（以毫秒为单位）
    const diffInMs = Math.abs(date2 - date1);

    // 将差值从毫秒转换为分钟
    const diffInMinutes = diffInMs / (1000 * 60);

    return diffInMinutes;
  } else {
    return 0
  }

}
const saveBtn = (form: any) => {
  let _form: any = {
    ...form
  }
  if (form.id) {
    proxy.$api.ProductClass.UpdateProductClass(_form)
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  } else {
    proxy.$api.ProductClass.AddProductClass({
      ..._form,
    })
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  }

  function _sun() {
    proxy.$message('保存成功')
    sendMsg('save', true);
    window.close();
  }
};
const getForm = () => {
  let _query: any = route.query
  if (_query.id) {
    proxy.$ObjToObj(data.form, _query)
    proxy.$message('获取成功')
    // proxy.$api.ProductClass.GetSingleProductClass({
    //   queryBy: 1,
    //   queryValue: _query.entityID,//获取数据传递的查询参数值（主键ID或唯一识别码）
    // })
    //   .then((res: any) => {
    //     proxy.$message('获取成功')
    //     data.form = {
    //       ...res,
    //     }
    //   })
    //   .catch(() => {
    //   });
  }

};

onMounted(() => {
  getForm();
});
</script>
